<template>
	<div class="main main-b-n c-l-b">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<div class="disFlex disFlex-column h-100">
			<div class="tit m-b-12">住家地图(服务中) : {{ geometries.length }}</div>
			<div class="amap-wrapper">
				<div id="container"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import { getmapData } from '../src/api/header';
import EventBus from './bustJson';
export default {
	data() {
		return {
			map: '',
			zoom: 9,
			markers: [],
			markers1: [],
			center: [31.23, 121.47],
			geometries: [],
			markerLayer: '',
			data: [],
			styles: {
				//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
				myStyle: new TMap.MarkerStyle({
					width: 20, // 点标记样式宽度（像素）
					height: 20, // 点标记样式高度（像素）
					src: 'https://webapi.amap.com/images/mass/mass0.png' //图片路径
				})
			}
		};
	},
	mounted() {
		//地图初始化函数，本例取名为init，开发者可根据实际情况定义
		this.initMap();

		// this.map = new AMap.Map('container', {
		// 	viewMode: '2D',
		// 	zoom: this.zoom,
		// 	center: this.center,
		// 	mapStyle: 'amap://styles/blue'
		// });
		// this.map.on('zoomchange', this.mapZoom);
		EventBus.$on('indexHsAllChanged', this.handleIndexHsAllChanged);
		this.getmapDatas(101539);

		// 去除logo及水印
		var a = document.querySelector('canvas+div:last-child');
		a.style.display = 'none';
	},
	methods: {
		initMap() {
			//定义地图中心点坐标
			var center = new TMap.LatLng(31.23, 121.47);
			//定义map变量，调用 TMap.Map() 构造函数创建地图
			this.map = new TMap.Map(document.getElementById('container'), {
				center: this.center, //设置地图中心点坐标
				zoom: 9, //设置地图缩放级别
				mapStyleId: 'style1', //设置样式ID

				pitch: 0, //设置俯仰角
				rotation: 45 //设置地图旋转角度
				// disableDefaultUI: true
			});
			this.marieke();
		},
		marieke() {
			this.markerLayer = new TMap.MultiMarker({
				map: this.map, //指定地图容器
				//样式定义
				styles: this.styles,
				geometries: this.geometries
			});

			this.markerLayer.on('click', this.clickHandler);
		},
		clickHandler(e) {
			console.log(e);
		},
		mapZoom() {
			this.zoom = parseInt(this.map.getZoom()); //获取当前地图级别
		},
		markerAllhl(markerAll) {
			this.map.clearMap();
			if (markerAll.length > 0) {
				for (const markerInfo of markerAll) {
					const markerPosition = markerInfo.position; // 标记点的位置
					const markerTitle = markerInfo.title; // 标记点的标题
					const markerContent = markerInfo.content; // 标记点的内容
					const markerIcon = new AMap.Icon({
						image: 'https://webapi.amap.com/images/mass/mass0.png',
						size: new AMap.Size(20, 20),
						imageSize: new AMap.Size(20, 20)
					});
					this.marker = new AMap.Marker({
						icon: markerIcon,
						position: markerPosition
					});
					this.marker.setTitle(markerTitle);
					// this.marker.setContent(markerContent);
					this.marker.setMap(this.map);
					this.marker.on('click', () => {
						// 在点击事件中处理你想要的操作，例如弹出信息窗口等
						console.log('Marker Clicked:', markerTitle, markerContent);
					});
				}
			}
		},
		handleIndexHsAllChanged(e) {
			this.getmapDatas(e);
		},
		async getmapDatas(orgId) {
			const orgIdMap = {
				1290323: 1668286,
				101537: 1668284,
				1183952: 1668285,
				101536: 1668283,
				101539: 1668282,
				101538: 1668281
			};
			let targetOrgIds = [orgId];
			if (orgIdMap[orgId] !== undefined) {
				targetOrgIds.push(orgIdMap[orgId]);
			}
			const data = [];
			for (const targetOrgId of targetOrgIds) {
				const res = await getmapData({ orgId: targetOrgId });
				data.push(
					...res.data.data.map((item, index) => ({
						id: index,
						position: new TMap.LatLng(item.lat, item.lng),
						title: item.psnl_name,
						// content: item.psnl_name,
						styleId: 'myStyle',
						properties: {
							//自定义属性
							title: item.psnl_name,
							address: item.residence_address,
							empname: item.empname,
							psnl_name: item.psnl_name
						}
					}))
				);
			}
			// 在数据获取完成后渲染地图
			this.renderMap(data);
		},

		renderMap(datas) {
			this.markerLayer.setGeometries([]);
			let data = datas[0]?.position ? datas[0].position : new TMap.LatLng(31.23, 121.47);
			this.map.setCenter(data);
			this.map.setZoom(9);
			// 添加标记 [121.47, 31.23]
			// this.map.setZoomAndCenter(9, data[0]?.position ? data[0].position : [121.47, 31.23]);
			// this.markers1 = [...data];
			// this.markerAllhl(this.markers1);
			this.geometries = datas;
			this.marieke();
		}
	}
};
</script>

<style scoped>
html,
body,
#container {
	width: 100%;
	height: 98%;
}

.main {
	position: relative;
	border: 1px solid #192856;
	padding: 12px;
	box-sizing: border-box;
}

.main-b-n {
	border: 0 !important;
}

.c-l-b,
.c-l-t {
	height: 100%;
}

.disFlex {
	display: flex;
}

.disFlex-column {
	display: flex;
	flex-direction: column;
}

.h-100 {
	height: 100%;
}

.tit {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
}

.m-b-12 {
	margin-bottom: 20px;
}

.amap-wrapper {
	width: 100%;
	height: 100%;
}
.main span:nth-child(1) {
	position: absolute;
	left: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 0 0 2px;
}

.main span:nth-child(2) {
	position: absolute;
	right: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 2px 0 0;
}

.main span:nth-child(3) {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 2px 2px 0;
}

.main span:nth-child(4) {
	position: absolute;
	left: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 0 2px 2px;
}

.amap-logo {
	display: none !important;
}
.marker-icon-container {
	width: 20px;
	height: 20px;
}
</style>
